// 自定义类
.position-c-c {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}
:root {
  --el-box-shadow: rgba(0, 0, 0, 0.2) 2px 6px 26px 0px, rgba(0, 0, 0, 0.2) -2px -6px 26px 0px !important;
  // cubic-bezier(1, -0.155, 0.165, 1.3)
  --animate-cubic: cubic-bezier(0.61, 0.225, 0.195, 1.25);
  --animate-cubic-bount: cubic-bezier(1, -0.155, 0.165, 1.3);
}

/**  ------------------------------element-plus---------------------------------------  **/
// 背景颜色
.bg-mark {
  position: absolute;
  z-index: -99;
  width: 60%;
  height: 60%;
  background: radial-gradient(
      104.24% 141.88% at 8.26% 9.64%,
      #b95be6 0%,
      rgb(185 91 230 / 18%) 69.92%,
      rgb(185 91 230 / 0%) 100%
    ),
    radial-gradient(
      103.57% 140.97% at 14.06% 105.21%,
      #f97c59 0%,
      rgb(249 124 89 / 19%) 72.45%,
      rgb(249 124 89 / 0%) 100%
    );
  border-radius: 50%;
  filter: blur(60px);
  transform: translate(50%, -50%);
}

// 文本折叠
@mixin text-overflow($lines) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

// 使用循环生成类
@for $i from 1 through 10 {
  .text-overflow-#{$i} {
    @include text-overflow($i);
  }
}

.text-overflow-h {
  @include text-overflow(var(--h));
}
// 渐变背景
.bg-linear {
  background-image: linear-gradient(to right, var(--el-color-primary) 0, transparent 50%);
  backdrop-filter: blur(1em);
  // background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

// element-plus
// 消息确认框
.el-message-box {
  --at-apply: "border-default-sm";
  .el-message-box__header {
    padding: 0 !important;
  }
  .el-message-box__headerbtn {
    display: none;
    top: 10px;
    right: 10px;
  }
  .el-message-box__btns {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;

    .el-button {
      min-width: 46%;
      height: auto;
    }
    .el-button:first-child {
      margin-right: auto;
    }
  }

  .el-message-box__header {
    font-size: 2em;
    text-align: center;
    letter-spacing: 0.1em;
  }

  .el-message-box__content {
    font-size: 0.9rem;
    margin-top: 1rem;
  }

  .el-message-box__title {
    font-size: 1rem;
    font-weight: 600;
  }
}

.el-overlay.is-message-box {
  .el-message-box {
    box-shadow:
      rgba(0, 0, 0, 0.05) 0px 7px 29px 0px,
      rgba(0, 0, 0, 0.05) 0px 3px 18px 0px;
    // --at-apply: "";
  }
}

// 消息框
body .el-message {
  width: max-content;
  max-width: 94%;
  padding: 0.4rem 0.6rem;
  transform: translate(-50%, -18%) !important;
  --at-apply: "text-14px rounded-2rem shadow-md";
  .el-message__content {
    --at-apply: "truncate text-12px mt-1px";
  }
}

// 单选钮
.el-radio-group {
  font-size: medium;
  .el-radio__inner {
    border-radius: 4px;
    transform: scale(1.1);
  }
}
.el-dialog {
  .el-dialog__headerbtn {
    height: 54px;
  }
  --at-apply: "border-default-sm";
  .el-dialog__title {
    font-size: 1rem;
  }
  .el-dialog__header.show-close {
    padding-left: 0;
    padding-right: 0;
  }
}

// 按钮
.el-button {
  transition: $transition-delay;
}

// popper
.el-popper-init {
  padding: 2px 4px;
}

.el-form-item {
  .el-form-item__error {
    margin-top: 0.5em;
  }
}
.el-overlay {
  border-radius: 0.3rem;
}

.el-dropdown-menu {
  .el-dropdown-menu__item {
    --at-apply: "h-fit mx-1 transition-100 rounded-1";
    &:not(.is-disabled) {
      &:hover,
      &:focus {
        --at-apply: "bg-[var(--el-color-primary)] text-white shadow";
      }
    }
  }
  .el-dropdown-menu__item--divided {
    --at-apply: "border-default-t";
  }
}
.el-dropdown__popper {
  --at-apply: "!border-default-hover";
}

// 弹出层
.el-popper.el-mention__popper {
  --at-apply: "bg-color-2 rounded-10px border-default";
  .el-mention-dropdown {
    padding: 0.5em;
  }
  .el-scrollbar {
    .el-scrollbar__wrap {
      padding: 0;
    }
    .el-scrollbar__view.el-mention-dropdown__list {
      padding: 0;
    }
  }

  // .el-mention-dropdown__header {
  //   padding: 0.2rem;
  // }
  .el-mention-dropdown__item {
    --el-mention-option-hover-background: #958c9b44;
    padding: 0.5em;
    border-radius: 6px;
  }
}

// 自动填充组件
.el-popper.el-autocomplete__popper {
  // .el-popper__arrow {
  //   // display: none;
  // }
  --at-apply: "p-0 rounded-10px border-default";
  .el-autocomplete-suggestion {
    padding: 0.5em;
  }
  .el-scrollbar {
    .el-autocomplete-suggestion__wrap {
      padding: 0;
    }
    .el-scrollbar__view.el-autocomplete-suggestion__list {
      padding: 0;
    }
  }
  .el-autocomplete-suggestion__list li {
    --el-mention-option-hover-background: #958c9b44;
    padding: 0.5em;
    border-radius: 6px;
  }
}


/**  ------------------------------markdown---------------------------------------  **/

// .md-editor {
//   .md-editor-preview-wrapper {
//     img {
//       --at-apply: "card-default border-default";
//     }
//   }
// }
// .transition-200,
// .transition-300,
// .transition {
//   will-change: transform, opacity, height, width, background-color, shadow;
// }

/**  ------------------------------right-menu---------------------------------------  **/

.mx-context-menu {
  --popper-fade-anima-scale: 0.9;
  --at-apply: "!border-default-2 dark:!bg-[#111111] !bg-white  animate-[popper-fade-anim_0.15s]";
  .mx-context-menu-items {
    .mx-context-menu-item {
      .mx-item-row {
        --at-apply: "text-color ";
        margin: 4px 2px;
      }
      &:hover .mx-item-row {
        --at-apply: "text-white";
      }
    }
  }

  .mx-context-menu-item-sperator {
    --mx-menu-divider: rgba(132, 132, 132, 0.2);
    background-color: transparent;
  }
  .mx-icon-placeholder {
    i {
      font-size: 0.9em;
      transition: transform 0.2s;
    }
  }

  //在这里覆盖默认css变量的值
  // --mx-menu-backgroud: var(--el-color-primary) !important;
  --mx-menu-active-backgroud: var(--el-color-primary);
  --mx-menu-hover-backgroud: var(--el-color-primary);
  --mx-menu-open-hover-backgroud: var(--el-color-primary);
  --mx-menu-open-backgroud: #71717188 !important;

  //   --mx-menu-backgroud: #ececec;
  // --mx-menu-hover-backgroud: #0165e1;
  // --mx-menu-active-backgroud: #0165e1;
  // --mx-menu-open-backgroud: #858585;
  // --mx-menu-open-hover-backgroud: #0165e1;
  // --mx-menu-divider: #d2d2d2;
  // --mx-menu-text: #232323;
  // --mx-menu-hover-text: #fff;
  // --mx-menu-active-text: #fff;
  // --mx-menu-open-text: #fff;
  // --mx-menu-open-hover-text: #fff;
  // --mx-menu-disabled-text: #bbbbbb;
  // --mx-menu-shadow-color: rgba(0, 0, 0, .1);
  // --mx-menu-backgroud-radius: 10px;
  // --mx-menu-shortcut-backgroud: transparent;
  // --mx-menu-shortcut-backgroud-hover: transparent;
  // --mx-menu-shortcut-backgroud-active: transparent;
  // --mx-menu-shortcut-backgroud-open: transparent;
  // --mx-menu-shortcut-backgroud-disabled: transparent;
  // --mx-menu-shortcut-text: #424242;
  // --mx-menu-shortcut-text-hover: #fff;
  // --mx-menu-shortcut-text-active: #fff;
  // --mx-menu-shortcut-text-open: #fff;
  // --mx-menu-shortcut-text-disabled: #a5a5a5;
  // --mx-menu-focus-color: transparent;
  // --mx-menu-border-color: #bbbbbb;
}
.el-loading-mask {
  *.is-fullscreen {
    border-radius: 6px;
  }

  .el-loading-spinner {
    .circular {
      animation-duration: 2s;
    }
    .el-loading-text {
      color: var(--el-color-base) !important;
    }
  }
}
.el-loading-mask {
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6px);
}
.dark {
  .el-loading-mask {
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
  }
}
.el-loading-mask {
  border-radius: 6px;
}

.el-image-viewer__wrapper {
  border-radius: 6px;
  overflow: hidden;
  .el-image-viewer__close {
    --at-apply: "!card-default-br";
  }
  .el-image-viewer__actions {
    height: 2.4em !important;
    --at-apply: "py-2 bg-color-br rounded-2rem op-80 hover:op-100 h-fit transition-all";
  }
}

// el-image
.el-image-viewer__wrapper:focus {
  animation: fade-in-anim 0.3s ease-in-out;
  .el-image-viewer__canvas {
    animation: fade-blur 0.2s ease-in-out;
  }
}

@keyframes fade-blur {
  0% {
    opacity: 0;
    filter: blur(1rem);
    transform: scale(0.9);
  }
  80% {
    opacity: 1;
  }
  100% {
    filter: blur(0);
  }
}
@keyframes fade-in-anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// 阴影
.shadow-b {
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
}
.shadow-t {
  box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
}
.shadow-l {
  box-shadow: -1px 0px 4px rgba(0, 0, 0, 0.05);
}
.shadow-r {
  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.05);
}
